<template>
    <div class="welcome-container">
      <el-row justify="center" align="middle" style="height: 78vh;">
        <el-col :span="12">
          <div class="welcome-content">
            <h1 class="welcome-title">修改您的密码</h1>
            <el-form :model="passwordForm" inline label-position="left" label-width="auto">
                <el-form-item label="新密码" required="true">
                    <el-input v-model="passwordForm.userPwd" placeholder="请输入新密码"></el-input>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="updatePassword">确认新密码</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script setup>
  import {ref, reactive, onMounted} from 'vue';
  import {ElForm, ElFormItem, ElInput, ElButton, ElTable, ElTableColumn, ElPagination, ElMessage} from 'element-plus';
  import {Edit, Delete} from '@element-plus/icons-vue';
  import axios from "axios";
  import { ElRow, ElCol } from 'element-plus';

  axios.defaults.headers.common['Authorization'] = `Bearer` + localStorage.getItem('token');

  // 密码表单数据
  const passwordForm = reactive({
    id: localStorage.getItem('ID'),
    userPwd: '',
  });

  // 提交新密码
  const updatePassword = () => {
    console.log('修改密码, id:' + passwordForm.id, '密码:' + passwordForm.userPwd);

    if(!passwordForm.userPwd){
        ElMessage.error('新密码不能为空');
        return ;
    }
    const params = {
      id: passwordForm.id,
      userPwd: passwordForm.userPwd
    }
    const response = axios.post('api/user', {params});
    console.log(response.data);
    if(response.data.code){
        ElMessage.success('修改成功');
    }else{
        ElMessage.error('修改失败');
    }
  }

  </script>
  
  <style scoped>
  .welcome-container {
    background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
    background-image: url(../assets/img/loginLogo1.jpg);
    background-size: cover;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }
  
  .welcome-content {
    text-align: center;
    padding: 20px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  .welcome-title {
    font-size: 36px;
    margin-bottom: 20px;
    color: #333;
  }
  
  .welcome-description {
    font-size: 18px;
    margin-bottom: 40px;
    color: #666;
  }
  </style>
  